<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['项目实施团队', '省份督导设置']"
      icon="fa fa-wrench"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>省份督导设置</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
                <div class="top_module top_module_box">
                  <span class="top_module_label module_text">负责省份</span>
                  <sa-company-tree
                    wrap="body"
                    companyTreeId="companyTree1"
                    (companySelected)="regionSelected($event)"
                    [inputApi]="inputApi"
                  ></sa-company-tree>
                  <!-- <select name="" class="top_module_select" [(ngModel)]="area" (change)="table_search()">
                    <option value="">全部</option>
                    <option *ngFor="let item of areaList" [value]="item.id">{{ item.text }}</option>
                  </select> -->
                </div>
                <div class="top_module">
									<span class="module_text">所属区域</span>
									<div class="s_hover_box">
										<select   class="select2"  id="areaNameSelect2">
											<option value=''></option>
										</select>
										<div class="s_del_icon" (click)='delAreaName()'>x</div>
									</div>
								</div>
                <button class="btn btn-primary" (click)="table_search()">查询</button>
              </div>
              <div class="right top-search">
                <input
                  type="text"
                  [(ngModel)]="searchKey"
                  (change)="table_search()"
                  class="search-input"
                  placeholder="关键字..."
                />
                <span class="top-search-box">
                  <button class="top-search-btn" type="button" (click)="table_search()">
                    <i class="fa fa-search"></i>
                  </button>
                </span>
              </div>
            </div>
            <div class="table_scroll">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
              >
                <thead>
                  <tr>
                    <th>负责省份</th>
                    <th>所属区域</th>
                    <th>运营督导账号</th>
                    <th>运营督导姓名</th>
                    <th>运营督导手机号</th>
                    <th>关联维修点</th>
                    <th>添加人</th>
                    <th>添加时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData">
                    <td>{{ row.areaName }}</td>
                    <td>{{ row.belongAreaName || '-' }}</td>
                    <td>{{ row.userName ? row.userName : '-' }}</td>
                    <td>{{ row.name ? row.name : '-' }}</td>
                    <td>{{ row.phone ? row.phone : '-' }}</td>
                    <td>
                      <button type="button" (click)="showAreaManagerDetail(row, detailRecordsModal)">
                        {{ row.maintenancePoint ? row.maintenancePoint.length : '-' }}
                      </button>
                    </td>
                    <td>{{ row.createUser }}</td>
                    <td>{{ row.createTime }}</td>
                    <td>
                      <button
                        type="button"
                        (click)="addManager(addManagerModel, row)"
                        *ngIf="userAdd && !row.name"
                        class="green"
                      >
                        添加
                      </button>
                      <button type="button" (click)="del_user(row)" *ngIf="userDelete && row.name" class="red">
                        解除
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="totalCount"
                [rows]="pageSize"
                [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>
  <section
    bsModal
    #addManagerModel="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content" style="width: 800px">
        <div class="modal-header">
          <button type="button" class="close" (click)="closeViewModal(addManagerModel)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">添加运营督导</h4>
        </div>
        <div class="modal-body">
          <div class="row form-horizontal">
            <div class="form-group">
              <label class="control-label col-sm-2 no-padding-right">
                运营督导
                <sup>*</sup>
              </label>
              <div class="col-sm-10">
                <input class="form-control" type="hidden" [(ngModel)]="stuffSelectData.name" name="name" />
                <div class="clearfix">
                  <div class="s_hover_box" style="display: block">
                    <select class="select2 form-control" id="managerSelect" style="width: 100%">
                      <option value=""></option>
                    </select>
                    <div class="s_del_icon" (click)="delManagerSelect()">x</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="closeViewModal(addManagerModel)">取消</button>
          <button type="button" class="btn btn-primary" (click)="viewManagerSubmit(addManagerModel)">添加</button>
        </div>
      </div>
    </div>
  </section>

  <!-- 关联维修点   弹窗-->
  <section
    bsModal
    #detailRecordsModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content" style="width: 800px">
        <div class="modal-header">
          <button type="button" class="close" (click)="closeViewModal(detailRecordsModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">维修点信息</h4>
        </div>
        <form class="form-horizontal" role="form" novalidate="novalidate">
          <div class="modal-body">
            <div class="row form-horizontal table_scroll" *ngIf="detailTableData.length != 0" style="max-height: 400px">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
              >
                <thead>
                  <tr>
                    <th>维修点名称</th>
                    <th>所属厂区</th>
                    <th>人员数量</th>
                    <th>人员信息</th>
                  </tr>
                </thead>
                <tbody class="carBody">
                  <tr *ngFor="let row of detailTableData; let i = index" [attr.data-index]="i">
                    <td>{{ row.repairPointName }}</td>
                    <td>{{ row.companyStr }}</td>
                    <td>{{ row.employNumber }}</td>
                    <td>{{ row.employeeInfo }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div *ngIf="detailTableData.length == 0" style="text-align: center">暂无数据</div>
          </div>
        </form>
      </div>
    </div>
  </section>
  <!-- 关联维修点 弹窗end-->
</div>
